<!--  -->
<template>
  <a-form-model-item
    :label="isApplyTable ? (formItem.downLoad ? '下载' : '上传') + formItem.showName : formItem.showName"
    :required="formItem.isRequired === 1"
    :class="{ difference: formItem.difference }"
    :extra="formItem.downLoad ? '用户可以在填写完成后通过本组件下载填写的表单' : formItem.extra"
    class="formItem"
  >
    <div style="display: flex; align-items: center; margin-top: 5px">
      <template v-if="formItem.itemType === 'Input' || formItem.itemType === 'InputPhone'">
        <a-input
          v-model="formItem.content"
          :placeholder="disabled ? '' : formItem.value"
          :disabled="disabled || (defPersonTel && formItem.dataType === 'personTel')"
          :maxLength="50"
        />
      </template>

      <template v-else-if="formItem.itemType === 'InputSearch'">
        <!-- <a-input
          v-if="formItem.itemType === 'InputSearch'"
          :value="
            isArray(formItem.content) && isObject(formItem.content[0]) ? formItem.content[0].name : formItem.content
          "
          :placeholder="disabled ? '' : formItem.value"
          :disabled="true"
          :maxLength="50"
        /> -->
        <InputSearch
          :value="
            isArray(formItem.content) && isObject(formItem.content[0]) ? formItem.content[0].name : formItem.content
          "
          :placeholder="disabled ? '' : formItem.value"
          :isInternalInterface="formItem.isInternalInterface"
          :formGroupId="formItem.formGroupId"
          :id="formItem.id"
          :disabled="disabled"
          @change="handleInputSearch"
        ></InputSearch>
      </template>
      <template v-else-if="formItem.itemType === 'SelectIndustry'">
        <SelectIndustry
          :value="formItem.content"
          :disabled="disabled"
          :placeholder="disabled ? '' : formItem.value"
          :treeData="optionMap[formItem.sort]"
          @change="changeSelectIndustry"
        ></SelectIndustry>
      </template>
      <template v-else-if="formItem.itemType === 'Select'">
        <a-select
          :value="formItem.content || undefined"
          :disabled="disabled"
          :placeholder="disabled ? '' : formItem.value"
          style="min-width: 150px;max-width:30vw;"
          allowClear
          @change="changeSelect"
        >
          <a-select-option v-for="(item, index) in optionMap[formItem.sort]" :key="index" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </template>

      <template v-else-if="formItem.itemType === 'InputNumber'">
        <a-input-number
          v-model="formItem.content"
          :disabled="disabled"
          :min="0"
          :max="999999999"
          :placeholder="disabled ? '' : formItem.value"
          style="width: 100%"
        />
      </template>
      <template v-else-if="formItem.itemType === 'InputPassword'">
        <a-input-password
          v-model="formItem.content"
          :disabled="disabled"
          :placeholder="disabled ? '' : formItem.value"
          autocomplete="new-password"
        />
      </template>
      <template v-else-if="formItem.itemType === 'InputTextArea'">
        <a-textarea
          :value="String(formItem.content === 0 || formItem.content ? formItem.content : '')"
          :disabled="disabled"
          :placeholder="disabled ? '' : formItem.value"
          :rows="4"
          @change="e => (formItem.content = e.target.value)"
        />
      </template>
      <template v-else-if="formItem.itemType === 'RadioGroup'">
        <a-radio-group v-model="formItem.content" :disabled="disabled">
          <a-radio v-for="item in optionMap[formItem.sort]" :value="item.id" :key="item.id">
            {{ item.name }}
          </a-radio>
        </a-radio-group>
      </template>
      <template v-else-if="formItem.itemType === 'CheckboxGroup'">
        <a-checkbox-group v-model="formItem.content" :disabled="disabled">
          <a-checkbox v-for="item in optionMap[formItem.sort]" :value="item.id" :key="item.id">
            {{ item.name }}
          </a-checkbox>
        </a-checkbox-group>
      </template>
      <template v-else-if="formItem.itemType === 'Switch'">
        <a-switch v-model="formItem.content" :disabled="disabled" />
      </template>
      <template v-else-if="formItem.itemType === 'DatePicker'">
        <a-date-picker
          v-model="formItem.content"
          valueFormat="YYYY-MM-DD"
          :placeholder="disabled ? '' : formItem.value"
          :disabled="disabled"
        />
      </template>
      <template v-else-if="formItem.itemType === 'TimePicker'">
        <a-time-picker v-model="formItem.content" format="HH:mm" :disabled="disabled" />
      </template>
      <template v-else-if="formItem.itemType === 'AreaPicker'">
        <AreaPicker childRequired :area="areaPickerArea" :disabled="disabled" @getArea="getArea" />
      </template>
      <template v-else-if="formItem.itemType === 'AreaStreetPicker'">
        <AreaPicker
          isStreet
          childRequired
          :enableValue="Number(formItem.enableValue)"
          :area="areaStreetPickerArea"
          :disabled="disabled"
          @getArea="getArea"
        />
      </template>

      <template v-else-if="formItem.itemType === 'UploadImg'">
        <UploadImg v-model="formItem.content" :disabled="disabled" :limit="formItem.length || 1" />
      </template>
      <template v-else-if="formItem.itemType === 'UploadFile' || formItem.itemType === 'Attachment'">
        <UploadFileMultiple1
          v-if="Array.isArray(formItem.content) && formItem.content.length"
          :defaultFileList="formItem.content"
          :disabled="formItem.itemType === 'Attachment' ? true : disabled"
          :maxNum="formItem.length"
          @uploadSuccess="uploadFileMultipleSuccess"
        />
        <UploadFileMultiple2
          v-else
          :disabled="formItem.itemType === 'Attachment' ? true : disabled"
          :maxNum="formItem.length"
          @uploadSuccess="uploadFileMultipleSuccess"
        />
      </template>
      <template v-else-if="formItem.itemType === 'ChooseLocation'">
        <div>
          <a-button v-if="!disabled" type="primary" :disabled="disabled" @click="handleChangeAddress">
            选择地址
          </a-button>
          <div class="disFlxAC">
            <div v-if="formItem.content && Array.isArray(formItem.content) && formItem.content.length >= 3">
              <div>{{ formItem.content[2] }}</div>
            </div>
            <div v-else-if="formItem.content">
              <div>{{ formItem.content }}</div>
            </div>
            <a-button
              v-if="formItem.content"
              type="link"
              :disabled="disabled"
              style="padding: 0;margin-left: 10px;"
              @click="formItem.content = undefined"
            >
              清除地址
            </a-button>
          </div>
        </div>
      </template>
      <template v-else-if="formItem.itemType === 'Honor'">
        <div style="width: 100%">
          <div
            v-for="(text, index) in formItem.content"
            :key="index"
            style="display: flex; align-items: center; margin-bottom: 15px; width: 100%"
          >
            <a-input
              v-model="formItem.content[index]"
              :placeholder="disabled ? '' : formItem.value"
              :disabled="disabled"
              style="width: 90%"
            />
            <a-icon v-show="!disabled" type="minus-circle" style="margin-left: 10px" @click="handleDelHonor(index)" />
          </div>
          <a-button v-if="!disabled" type="primary" :disabled="disabled" @click="handleAddHonor">添加</a-button>
        </div>
      </template>
      <template v-else-if="formItem.itemType === 'UploadVideo'">
        <UploadVideo
          v-if="disabled ? !!formItem.content : true"
          v-model="formItem.content"
          :disabled="disabled"
          :fileSize="30"
        />
      </template>
      <template v-else-if="formItem.itemType === 'YearPicker'">
        <a-date-picker
          v-model="formItem.content"
          mode="year"
          :open="dateOpen"
          format="YYYY"
          valueFormat="YYYY"
          :placeholder="disabled ? '' : '请选择年份'"
          @openChange="openChange"
          @panelChange="val => panelChange(val, 'YYYY')"
          @change="val => dateChange(val, 'YYYY')"
          :disabled="disabled"
        />
      </template>
      <template v-else-if="formItem.itemType === 'MonthPicker'">
        <a-month-picker
          v-model="formItem.content"
          :open="dateOpen"
          format="YYYY-MM"
          valueFormat="YYYY-MM"
          :placeholder="disabled ? '' : '请选择月份'"
          @openChange="openChange"
          @panelChange="val => panelChange(val, 'YYYY-MM')"
          :disabled="disabled"
        />
      </template>
      <template v-else-if="formItem.itemType === 'ApplyTable'">
        <template v-if="formItem.downLoad">
          <a-button :disabled="disabled">立即下载</a-button>
        </template>
        <template v-else>
          <UploadFileMultiple1
            v-if="formItem.content && JSON.stringify(formItem.content).indexOf('url') != -1"
            :defaultFileList="urlDefaultFileList"
            :disabled="disabled"
            :maxNum="1"
            @uploadSuccess="uploadFileMultipleSuccess"
          />
          <UploadFileMultiple1
            v-else-if="formItem.content && JSON.stringify(formItem.content).indexOf('http') != -1"
            :defaultFileList="httpDefaultFileList"
            :disabled="disabled"
            :maxNum="1"
            @uploadSuccess="uploadFileMultipleSuccess"
          />
          <UploadFileMultiple2 v-else :disabled="disabled" :maxNum="1" @uploadSuccess="uploadFileMultipleSuccess" />
        </template>
      </template>
      <slot></slot>
    </div>
  </a-form-model-item>
</template>

<script>
import UploadFileMultiple1 from '@/components/UploadFile/multiple.vue'
import UploadFileMultiple2 from '@/components/UploadFile/multiple.vue'
import AreaPicker from '@/components/AreaPicker'
import UploadImg from '@/components/UpFile/uploadImg'
import UploadVideo from '@/components/UpFile/uploadVideo'
import InputSearch from '@/components/InputSearch'
import SelectIndustry from '@/components/SelectIndustry/index.vue'

import { memberTypeList } from '@/api/member/member'

import moment from 'moment'
import { buildUUID } from '@/utils/uuid'
import { mapActions } from 'vuex'
import { isString, isObject, isArray } from 'lodash-es'

export default {
  props: ['formItem', 'subIndex', 'disabled', 'defPersonTel'],
  components: {
    AreaPicker,
    UploadFileMultiple1,
    UploadFileMultiple2,
    UploadImg,
    UploadVideo,
    InputSearch,
    SelectIndustry
  },
  data() {
    return {
      moment,
      buildUUID,
      optionMap: {},
      imgList: [],
      dateOpen: false
    }
  },
  computed: {
    isApplyTable() {
      return this.formItem.itemType === 'ApplyTable'
    },
    areaPickerArea() {
      return this.formItem.content && this.formItem.content.length
        ? { provinceId: this.formItem.content[0], cityId: this.formItem.content[1], areaId: this.formItem.content[2] }
        : {}
    },
    areaStreetPickerArea() {
      return this.formItem.content && this.formItem.content.length
        ? {
            provinceId: this.formItem.content[0],
            cityId: this.formItem.content[1],
            areaId: this.formItem.content[2],
            streetId: this.formItem.content[3]
          }
        : {}
    },
    urlDefaultFileList() {
      return Array.isArray(this.formItem.content)
        ? this.formItem.content
        : [
            {
              ...JSON.parse(this.formItem.content),
              uid: this.buildUUID(),
              status: 'done'
            }
          ]
    },
    httpDefaultFileList() {
      return [
        {
          name: this.formItem.content,
          url: this.formItem.content,
          uid: this.buildUUID(),
          status: 'done'
        }
      ]
    }
  },
  watch: {
    formItem: {
      handler() {
        this.getAnswerList(this.formItem)
        // this.$forceUpdate()
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(['SetRequestObj']),
    handleInputSearch(obj) {
      console.log(obj)

      this.$emit('handleInputSearch', obj)
    },
    changeSelect(val) {
      console.log(val)
      this.$set(this.formItem, 'content', val)
      this.$forceUpdate()
    },
    changeSelectIndustry(val) {
      this.$set(this.formItem, 'content', val)
      this.$forceUpdate()
    },
    getAnswerList(item) {
      // let requestObj = this.$store.state.app.requestObj
      // if (requestObj.hasOwnProperty(item.type)) {
      //   this.$set(this.optionMap, item.sort, requestObj[item.type])
      //   return
      // }
      if (item.isInternalInterface === 2) {
        this.Dict.get(item.type).then(res => {
          let data = res.map(item => {
            return {
              id: item.dictValue,
              name: item.dictLabel
            }
          })
          this.$set(this.optionMap, item.sort, data)
          // this.SetRequestObj({ type: item.type, data })
        })
      } else if (item.isInternalInterface === 1) {
        memberTypeList(item.type).then(res => {
          let data = (res.data[item.type] || []).map(item => {
            return {
              ...item,
              id: isNaN(item.id) || item.id.toString()[0] === '0' ? item.id : Number(item.id)
            }
          })
          this.$set(this.optionMap, item.sort, data)
          // this.SetRequestObj({ type: item.type, data })
        })
      } else {
        let data = (item.customFormItemAnswerDtoList || item.customFormItemAnswerList || []).map(item => {
          return {
            id: item.id,
            name: item.words
          }
        })
        return this.$set(this.optionMap, item.sort, data)
      }
    },
    getArea(val) {
      let addList = []
      val.provinceId && addList.push(val.provinceId)
      val.cityId && addList.push(val.cityId)
      val.areaId && addList.push(val.areaId)
      val.streetId && addList.push(val.streetId)
      this.$set(this.formItem, 'content', addList)
    },
    handleAddHonor() {
      this.formItem.content.push('')
    },
    handleDelHonor(index) {
      this.formItem.content.splice(index, 1)
    },
    handleChangeAddress() {
      this.$emit('showMap', this.formItem, this.subIndex)
    },
    uploadFileMultipleSuccess(fileList) {
      this.formItem.content = fileList
    },
    uploadVideoSuccess(fileUrl) {
      this.formItem.content = fileUrl
    },
    delVideo() {
      this.formItem.content = ''
    },
    //年/月份面板打开/关闭事件
    openChange(val) {
      this.dateOpen = val
    },
    //年/月份选择事件
    panelChange(val, format) {
      this.formItem.content = moment(val).format(format)
      this.dateOpen = false
    },
    dateChange(val, format) {
      this.$forceUpdate()
      this.formItem.content = val ? moment(val).format(format) : undefined
    },
    isString,
    isObject,
    isArray
  },
  created() {
    this.getAnswerList(this.formItem)
  }
}
</script>
<style scoped lang="less">
.difference {
  ::v-deep {
    label {
      color: red;
    }
  }
}

.formItem {
  display: flex;
  align-items: center;

  ::v-deep {
    label {
      display: block;
      text-overflow: ellipsis !important;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      max-width: 200px;
      margin-left: 0;
    }
    .ant-form-item-children {
      & > div {
        & > span {
          max-width: 100%;
          width: fit-content;
        }
      }
    }
  }
}
</style>
